<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客详情页</title>
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/blog_detail.css">

  <!-- 引入 editor.md 的依赖 -->
  <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
  <script src="js/jquery.min.js"></script>
  <script src="editor.md/lib/marked.min.js"></script>
  <script src="editor.md/lib/prettify.min.js"></script>
  <script src="editor.md/editormd.js"></script>
</head>
<body>
<!-- 这是导航栏 -->
<div class="nav">
  <img src="image/logo2.jpg" alt="">
  <span>我的博客系统</span>
  <!-- 空白元素, 用来占位置 -->
  <div class="spacer"></div>
  <a href="blog_list.html">主页</a>
  <a href="blog_edit.html">写博客</a>
  <a href="logout">注销</a>
</div>
<!-- 这里的 .container 作为页面的版心 -->
<div class="container">
  <!-- 左侧个人信息 -->
  <div class="left">
    <!-- 表示整个用户信息区域. -->
    <div class="card">
      <img src="image/doge.png" alt="">
      <h3></h3>
      <a href="#">github 地址</a>
      <div class="counter">
        <span>文章</span>
        <span>分类</span>
      </div>
      <div class="counter">
        <span>2</span>
        <span>1</span>
      </div>
    </div>
  </div>
  <!-- 右侧内容详情 -->
  <div class="right">
    <!-- 使用这个 div 来包裹整个博客的内容详情 -->
    <div class="blog-content">
      <!-- 博客标题 -->
      <h3></h3>
      <!-- 博客的时间 -->
      <div class="date"></div>
      <!-- 博客的正文内容 -->
<!--      这里opacity: 80%是透明效果-->
      <div id="content" style="opacity: 80%">


        <!-- 这里内容需要通过js代码动态进行 -->

      </div>
    </div>
  </div>
</div>















<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 实现一个方法获取博客详情页
  function getBlogDetail() {
    $.ajax({
      type: 'get',
      // 从url中获取    location.search 拿到了形如 '?blogId=5' 这样的一段内容
      url: 'blog' + location.search,
      // 注意这里数据拼接的过程  那这里的'?blogId=5'从哪来
      // 是我们在博客列表页里设置的a标签带的内容   a.href = 'blog_detail.html?blogId=' + blog.blogId;
      // 点击 查看全文(就是标签)
      success: function(body) {
        // 根据 body 中的内容来构造页面
        // 1. 构造博客标题
        let h3 = document.querySelector(".blog-content>h3");//获取标题
        h3.innerHTML = body.title;
        // 2. 构造博客发布时间
        let dateDiv = document.querySelector('.date');
        dateDiv.innerHTML = body.postTime;
        // 3. 构造博客正文
        // 如果直接把 content 设为 innerHTML, 此时展示在界面上的内容, 是原始的 markdown 字符串
        // 咱们需要的是渲染后的, 带有格式的效果
        // let content = document.querySelector('#content');
        // content.innerHTML = body.content;



        // 将id=content内容进行渲染
        // 第一个参数对应 id=content 的 html 标签. 渲染后得到的 html 片段就会被放到这个 标签下 就是方到61行左右的位置
        editormd.markdownToHTML('content', {
          markdown: body.content
        });
      }
    });
  }

  getBlogDetail();








  // 获取当前登录的用户信息
  // 加上一个逻辑, 通过 GET /login 这个接口来获取下当前的登录状态
  function getUserInfo(pageName) {
    $.ajax({
      type: 'get',
      url: 'login',
      success: function(body) {
        // 判定此处的 body 是不是一个有效的 user 对象(userId 是否非 0)
        if (body.userId && body.userId > 0) {
          // 登录成功!
          // 不做处理!
          console.log("当前用户登录成功! 用户名: " + body.username);

          // 在 getUserInfo 的回调函数中, 来调用获取作者信息
          // 注意使用ajax执行顺序是不确定的
          // 但是如果在第一个ajax的回调中执行第二个ajax 就可以保证ajax之间获取数据的先后顺序
          getAuthorInfo(body);
        } else {
          // 登录失败!
          // 让前端页面, 跳转到 login.html
          alert("当前您尚未登录! 请登录后再访问博客列表!");
          location.assign('blog_login.html');
        }
      },
      error: function() {
        alert("当前您尚未登录! 请登录后再访问博客列表!");
        location.assign('blog_login.html');
      }
    });
  }
  // 判定用户的登录状态
  getUserInfo("blog_detail.html");




  // 从服务器获取一下当前博客的作者信息, 并显示到界面上.
  // 参数 user 就是刚才从服务器拿到的当前登录用户的信息
  function getAuthorInfo(user) {
    $.ajax({
      type: 'get',
      url: 'authorInfo' + location.search,
      success: function(body) {
        // 此处的 body, 就是服务器返回的 User 对象, 是文章的作者信息
        if (body.username) {
          // 如果响应中的 username 存在, 就把这个值设置到页面上.
          changeUserName(body.username);

          if (body.username == user.username) {
            // 作者和登录的用户是一个人, 则显示 "删除按钮"
            let navDiv = document.querySelector('.nav');
            let a = document.createElement('a');
            a.innerHTML = '删除';
            // 期望点击删除, 构造一个形如 blogDelete?blogId=6 这样的请求
            a.href = 'blogDelete' + location.search;
            navDiv.appendChild(a);
          }
        } else {
          console.log("获取作者信息失败! " + body.reason);// body.reason显示失败的原因
        }
      }
    });
  }
  // 服务器获取当前的用户名
  function changeUserName(username) {
    // 将.card>h3下的   h3标签进行跳转
    let h3 = document.querySelector('.card>h3');
    h3.innerHTML = username;
  }


</script>

<!-- 在这里引入上述的 js 文件, 就可以执行到里面的代码, 也就进行了登录状态的监测了 -->
<!--<script src="js/common.js"></script>-->

</body>
</html>